<template>
  <!-- 测试用例 -->
  <div>
    <!-- 上传/添加测试用例 -->
    <div v-if="isOperation == 1">
      <div class="test-top-type">
        <p>添加测试用例方式：</p>
        <el-radio-group v-model="isAddTestCase" @change="handleRemoveData()">
          <el-radio :value="1" size="small" border>上传测试用例</el-radio>
          <el-radio :value="2" size="small" border>导入项目用例</el-radio>
        </el-radio-group>
      </div>
      <!-- 上传测试用例/导入项目用例 -->
      <div class="test-box">
        <!-- 上传测试用例 -->
        <div v-if="isAddTestCase == 1">
          <el-upload class="upload-demo" drag action="" multiple="true" v-model:file-list="caseFileText"
            :before-upload="handleBeforeUpload" v-loading="uploading">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
          </el-upload>
        </div>

        <!-- 选择项目用例 -->
        <div v-if="isAddTestCase == 2">
          <!-- <p>{{ isTestCaseSearch }}</p> -->
          <ItemProjectCasesVue :itemItemId="isTestCaseSearch.itemItemId" :childId="isTestCaseSearch.childId"
            :isAddTestCase="1" @add-case-success="handleAddCaseSuccess"></ItemProjectCasesVue>
        </div>
      </div>
    </div>

    <!-- 查看测试用例 -->
    <div v-if="isOperation == 2">
      <ItemTestCasesVue :childId="isTestCaseSearch.childId" :fatherId="isTestCaseSearch.fatherId"
        :isAllCase="isAllCase"></ItemTestCasesVue>
    </div>
  </div>
</template>

<script setup lang='ts'>
import ItemProjectCasesVue from './itemProjectCases.vue';
import ItemTestCasesVue from './itemTestCases.vue';
import { ref, PropType, watch } from 'vue';
import {PostRequirementTestCases, } from "@/api/newDemands/index";
import { postUploadCaseFile, } from "@/api/project/index";
import { ElMessage } from 'element-plus';

interface testCaseSearchType {
  itemItemId: null | Number,
  childId: null | Number,
  isUploadCase: null | Number,
  fatherId: null | Number,
};

const emit = defineEmits(['add-success', 'case-result']);
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  testCaseSearch: {
    type: Object as PropType<testCaseSearchType>,
    required: true,
    default: () => ({
      itemItemId: null,
      childId: null,
      isUploadCase: null,
      fatherId: null
    })
  },
  isOperation: {
    type: Number,
    required: true
  },
  isAllCase: {
    type: Boolean,
    required: true
  }
});

const uploading = ref(false);
const isTestCaseSearch = ref<testCaseSearchType>({
  itemItemId: null,
  childId: null,
  isUploadCase: null,
  fatherId: null
});// 存储父组件传参

const isOperation = ref<any>(1);// 1: 上传用例，2：查看用例
const isAllCase = ref(false);// false: 查看任务用例，true:查看需求用例
const isAddTestCase = ref(1);// 添加测试用例方式：1：上传用例文档，2：导入项目用例
const caseFileText = ref([]);// 测试用例文件显示
const caseFilePath = ref<any>([]);// 测试用例文件地址
const addTestCaseForm = ref<any>({
  requirementChildId: null,
  filePath: "",
  childCaseList: []
});// 导入测试用例提交数据

// 监听 testCaseSearch
watch(() => props.testCaseSearch, async (newData, oldData) => {
  if (newData !== oldData) {
    isTestCaseSearch.value = newData;
    //   await getTestCaseList();
  }
}, { immediate: true });

// 监听 isOperation
watch(() => props.isOperation, async (newOpera) => {
  if (newOpera) {
    isOperation.value = newOpera;
    if (isOperation.value == 2) {
      emit("case-result", true);
    }
  }
}, { deep: true, immediate: true });

// 监听 isAllCase
watch(() => props.isAllCase, async (newOpera) => {
  if (newOpera) {
    isAllCase.value = newOpera;
  }
}, { deep: true, immediate: true });

// 清空导入/上传测试用例提交数据
const handleRemoveData = async () => {
  addTestCaseForm.value = {
    requirementChildId: null,
    filePath: "",
    childCaseList: []
  };

  // if (isAddTestCase.value == 2) {
  //   await getRequirementCaseList();
  // };
};

// TODO 上传测试用例
// 导入或选择自己负责测试任务的测试用例
const handleAddTestCaseData = async () => {
  handleRemoveData();

  addTestCaseForm.value = {
    requirementChildId: isTestCaseSearch.value.childId,
    filePath: caseFilePath.value,
    childCaseList: []
  };

  const { data } = await PostRequirementTestCases(addTestCaseForm.value);
  if (data.code === 200) {
    handleRemoveData();
    emit("add-success", true);

    // loading.value = true;
    // await getTestCaseList();
    // loading.value = false;
  } else {
    ElMessage.error(data.msg);
    emit('add-success', false);
    throw console.error(data.msg);
  }
};

const handleBeforeUpload = async (file: any) => {
  uploading.value = true;
  // 上传文件
  const { data } = await postUploadCaseFile(file);

  if (data.code === 200) {
    uploading.value = false;
    // 添加测试用例文件
    caseFilePath.value = data.data.resultFilePath;
    await handleAddTestCaseData();
  } else {
    uploading.value = false;
    ElMessage.error(data.ms);
    throw console.error(data.msg);
  }
};

// TODO 导入项目用例监听
const handleAddCaseSuccess = async (success: boolean) => {
  if (success) {
    handleRemoveData();
    emit("add-success", true);
    return;
  } else {
    emit('add-success', false);
    return;
  }
};



// onMounted(async () => {
//   await getTestCaseList();
// });
</script>

<style lang='scss' scoped>
.test-top-type {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;

  p {
    font-weight: bold;
  }
}

</style>